<template>
	<view class="button">
		<view class="img">
			<image src="/static/shouye01.png" mode="" @click="goToIndex"></image>
		</view>
		<!-- #06ac56 -->
		<!-- #ff1f2c -->
		<view class="remind">
			<view class="main green" v-show="remind.code === 306" @click="makeRemind(1)">
				<text>预约</text>
				<text>提醒</text>
			</view>
			<view class="main red" v-show="remind.code === 307" @click="makeRemind(2)">
				<text>取消</text>
				<text>预约</text>
			</view>
		</view>
		<button v-show="activityObj.status == 0" class="join forbid" disabled>活动已下架</button>
		<button v-show="activityObj.status != 0" class="join" @click.stop="apply" :disabled="btnForbid || !flag" :class="{'forbid': btnForbid || !flag }">我要报名</button>
		<!-- <button v-show="notBegin" class="join forbid" @click.stop="apply" :disabled="notBegin">我要报名</button> -->
		<view class="mask" v-show="isShowMask" @click="hideForm"></view>
		<view class="buy-form" v-show="isShow">
			<view style="margin: 30rpx;padding-bottom: 100rpx;">
				<!-- 表头 -->
				<view class="title">
					<view>请填写购买信息</view>
					<text class="close" @click="close">×</text>
				</view>
				<!-- 所在城市 -->
				<!-- <view class="city" v-show="activityObj.displayorder === 1">
					<view style="font-size: 28rpx;color: #032545;">所在城市</view>
					<view style="margin-top: 10rpx;display: flex;flex-wrap: wrap;">
						<text class="on">福州</text>
						<text>福州</text>
						<text>福州</text>
						<text>福州</text>
						<text>福州</text>
						<text>福州</text>
						<text>福州</text>
						<text>福州</text>
						<text>福州</text>
					</view>
				</view>
				<view style="border-bottom: 1rpx solid #e6e6e6;margin-top: 20rpx;" v-show="activityObj.displayorder === 1"></view> -->
				<!-- 就近中心 -->
				<!-- <view class="city" style="margin-top: 20rpx;" v-show="activityObj.displayorder === 1">
					<view style="font-size: 28rpx;color: #032545;">就近中心</view>
					<view style="margin-top: 10rpx;display: flex;flex-wrap: wrap;">
						<text class="on">福州</text>
						<text>万达中心</text>
						<text>万达中心</text>
						<text>万达中心</text>
						<text>万达中心</text>
						<text>万达中心</text>
						<text>万达中心</text>
						<text>福州</text>
						<text>福州</text>
					</view>
				</view>
				<view style="border-bottom: 1rpx solid #e6e6e6;margin-top: 20rpx;" v-show="activityObj.displayorder === 1"></view> -->
				<!-- 宝宝姓名 -->
				<!-- <view class="city" style="margin-top: 20rpx;" v-show="activityObj.displayorder === 1">
					<view style="font-size: 28rpx;color: #032545;display: flex;align-items: center;">
						<view>宝宝姓名</view>
						<view style="color: #ed171f;font-size: 28rpx;background-color: transparent;line-height: 56rpx;margin-left: 5rpx;">*</view>
						<input class="uni-input" placeholder="请输入宝宝姓名" style="text-align: right;width: 80%;"/>
					</view>
				</view>
				<view style="border-bottom: 1rpx solid #e6e6e6;margin-top: 20rpx;" v-show="activityObj.displayorder === 1"></view> -->
				<!-- 多规格 -->
				<view v-show="activityObj.hasoption === 1" class="line" v-for="(spe, index) in spec" :key="spe.id">
					<view class="city" style="margin-top: 20rpx;">
						<view style="font-size: 28rpx;color: #032545;display: flex;align-items: center;">
							<view>{{ spe.title }}</view>
							<view style="color: #ed171f;font-size: 28rpx;background-color: transparent;line-height: 56rpx;margin-left: 5rpx;">*</view>
							<!-- <input class="uni-input" placeholder="请输入宝宝姓名" style="text-align: right;width: 88%;"/> -->
						</view>
						<view style="margin-top: 10rpx;display: flex;flex-wrap: wrap;">
							<!-- <button class="on" v-for="sp in spe.item" :key="sp.id">{{ sp.title }}</button> -->
							<button v-for="(sp, i) in spe.item" :key="sp.id" :class="{on: currentSp[index] === i}" @click="selcetSp(index,i,sp)" ref="spec">{{ sp.title }}</button>
						</view>
					</view>
					<!-- <view style="border-bottom: 1rpx solid #e6e6e6;margin-top: 20rpx;"></view> -->
				</view>
				<!-- 多选框 -->
				<!-- <view class="city" style="margin-top: 20rpx;" v-show="activityObj.displayorder === 1">
					<view style="font-size: 28rpx;color: #032545;display: flex;align-items: center;">
						<view>多选框</view>
						<view style="color: #ed171f;font-size: 28rpx;background-color: transparent;line-height: 56rpx;margin-left: 5rpx;">*</view>
					</view>
					<view style="margin-top: 10rpx;display: flex;flex-wrap: wrap;">
						<checkbox-group name="checkbox" style="display: flex;flex-wrap: wrap;" @change="chooseLike">
							<label>
								<checkbox value="checkbox1" /><text>选项一</text>
							</label>
							<label>
								<checkbox value="checkbox2" /><text>选项二</text>
							</label>
							<label>
								<checkbox value="checkbox3" /><text>选项三</text>
							</label>
							<label>
								<checkbox value="checkbox4" /><text>选项四</text>
							</label>
							<label>
								<checkbox value="checkbox3" /><text>选项三</text>
							</label>
							<label>
								<checkbox value="checkbox4" /><text>选项四</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view style="border-bottom: 1rpx solid #e6e6e6;margin-top: 20rpx;" v-show="activityObj.displayorder === 1"></view> -->
				
				<!-- 宝宝照片 -->
				<!-- <view class="city" style="margin-top: 20rpx;margin-bottom: 140rpx;" v-show="activityObj.displayorder === 1">
					<view style="font-size: 28rpx;color: #032545;display: flex;align-items: center;">
						<view>宝宝照片</view>
						<view style="color: #ed171f;font-size: 28rpx;background-color: transparent;line-height: 56rpx;margin-left: 5rpx;">*</view>
					</view>
					<view style="margin-top: 10rpx;display: flex;flex-wrap: wrap;">
						<image :src="'/static/upphoto.jpg'" mode="" style="width: 80rpx;height: 80rpx;border-radius: 4rpx;"></image>
					</view>
				</view> -->
				<button type="primary" class="button-pay forb" v-show="currentSp.length !== calculatePriceLen">{{ payBtnTxt }}</button>
				<button type="primary" class="button-pay" @click.stop='pay' v-show="currentSp.length === calculatePriceLen">付款 {{ specPrice | addRMB }}</button>
			</view>
		</view>
		<!-- 支付选择窗口 -->
		<view class="pay-select" v-if="isPayShow">
			<view class="way">
				<view>请选择支付方式</view>
				<text class="close" @click="closePay">×</text>
			</view>
			<view class="time">请在{{ moneyObj.order_close_time }}分内完成支付  金额 <text>¥{{ moneyObj.price }}</text>元</view>
			<view class="select">
				<view class="wei-xin" v-for="(item, index) in payWay" :key="index" @click="selectPay(index)">
					<image :src="item.url" mode="" class="wei"></image>
					<text class="balance">
						<text>{{ item.val }}</text>
						<text v-show="item.val === '余额'">（¥{{ moneyObj.balance }}）</text>
					</text>
					<image class="is-right" :src="item.sel" mode="" :class="{selected: currentIndex == index}"></image>
				</view>
				<!-- <view class="wei-xin">
					<image src="/static/pay/zhi_fu_bao.jpg" mode="" class="wei"></image>
					<text>支付宝支付</text>
					<image src="/static/pay/pay_selected.jpg" mode="" class="selected"></image>
				</view>
				<view class="wei-xin">
					<image src="/static/pay/balance.jpg" mode="" class="wei"></image>
					<text>余额（¥{{ moneyObj.balance}}）</text>
					<image src="/static/pay/pay_selected.jpg" mode="" class="selected"></image>
				</view> -->
				<button class="button-pay" @click.once='payMent'>确认支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getBalance, payMoney, getFindLine, getUserInfo, getActivityOne } from '../api'
	function trimSpace(array){  
	     for(var i = 0 ;i<array.length;i++) {
			if(array[i] == " " || array[i] == null || typeof(array[i]) == "undefined") {
				array.splice(i,1);
				i= i-1;
			}
		 }
	     return array;
	}
	export default {
		data() {
			return {
				// msg: 'index'
				isShowMask: false, // 遮罩默认不显示
				isShow: false, // 表单
				isPayShow: false,
				sureDisabled: false,
				payWay: [
					{
						url: '/static/pay/wei_xin.jpg',
						val: '微信支付',
						sel: '/static/pay/pay_selected.jpg'
					},
					// {
					// 	url: '/static/zhi_fu_bao.jpg',
					// 	val: '支付宝支付',
					// 	sel: '/static/pay/pay_selected.jpg'
					// },
					{
						url: '/static/pay/balance.jpg',
						val: '余额',
						sel: '/static/pay/pay_selected.jpg'
					}
				],
				moneyObj: {}, // 点击我要报名出现的余额
				currentIndex: 0, // 默认选中微信支付
				// userInfoDetail: {}, // 当前用户信息
				spec: [], // 多规格
				option: [], // 价格信息
				currentSp: [], // 选中的样式
				calculatePrice: [], // 计算价格
				specPrice: '', // 多规格 付款价格
				optionId: '', //  规格ID
				calculatePriceLen: '', // 选择后的 长度
				isShowPayBtn: false, // 付款按钮是否显示
				payBtnTxt: '付款', 
			};
		},
		props: {
			btnForbid: {
				type: Boolean,
				default: true
			},
			activityObj: {
				type: Object,
				defalut: ()=> {
					return {}
				}
			},
			flag: {
				type: Boolean
			},
			remind: {
				type: Object,
				defalut: ()=> {
					return {}
				}
			},
			userInfoDetail: {
				type: Object,
				defalut: {}
			},
			isCompletion: {
				type: Boolean,
				defalut: false
			},
			notBegin: {
				type: Boolean,
				defalut: true
			}
		},
		onLoad() {
			
		},
		
		filters: {
			addRMB(val) {
				return "¥" + val
			}
		},
		methods: {
			makeRemind(index) {
				// 1是预约提醒，2是取消预约
				if (index === 1) {
					uni.showModal({
					    title: '预约提醒',
					    content: '系统将于报名前10分钟通过公众号消息推送报名提醒，请您留意',
					    success: (res)=> {
					        if (res.confirm) {
					            console.log('点击确定')
								this.$emit('getRemind', true)
					        } else if (res.cancel) {
					            console.log('点击取消')
					        }
					    }
					})
				} else {
					uni.showModal({
					    title: '取消预约',
					    content: '取消公众号消息推送报名提醒',
					    success: (res)=> {
					        if (res.confirm) {
					            console.log('点击确定')
								this.$emit('getRemind', false)
					        } else if (res.cancel) {
					            console.log('点击取消')
					        }
					    }
					})
				}
			},
			// 去首页
			goToIndex() {
				// console.log('去首页')
				// this.$emit('goToIndex',this.msg)
				uni.switchTab({
					url: '/pages/active/list'
				})
			},
			// 我要报名
			apply() {
				console.log('button')
				console.log(this.flag)
				console.log('button')
				this.btnForbid = true
				this.$emit('forbidBtn', this.btnForbid)
				console.log(111)
				console.log(this.activityObj)
				console.log(this.isCompletion)
				console.log(111)
				if (!this.userInfoDetail.mobile) {
					uni.showToast({
			　　　　　　 title: "请先绑定手机号",
			　　　　　　 icon: 'none'
			　　　　 })
			        // 未绑定手机id为1，我的页面进入，id为2
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/user/bindPhone?id=${this.activityObj.id}&active=1`
						})
					}, 500)
					return
				}
				if (!this.isCompletion) {
					uni.showToast({
			　　　　　　 title: "请先完善信息",
			　　　　　　 icon: 'none'
			　　　　 })
					// 未绑定手机id为1，我的页面进入，id为2
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/userinfo/userinfo?id=${this.activityObj.id}&active=1`
						})
					}, 500)
					return
				}
				if (this.activityObj.hasoption === 1) {
					let data = {id: this.activityObj.id}
					getActivityOne(data, (res) => {
						console.log('当前对象')
						console.log(res)
						console.log('当前对象')
						this.spec = res.data.options.spec
						let len = this.spec.length
						for (let i = 0; i< len; i++) {
							this.currentSp.push(-1)
						}
						console.log(this.currentSp)
						this.option = res.data.options.option
					})
				}
				if (this.activityObj.is_line === 1) {
					let data = {aid:this.activityObj.id}
					getFindLine(data, (res) => {
						if (res.data.count >= 0) {
							uni.showModal({
							    title: '提示',
							    content: `此活动报名已满，前面还有${res.data.count}人正在等位，您是否愿意支付费用等位？（排队等位，若前面有人取消报名，您可顺利补位，若直至活动报名截止，等位失败，费用会原路退还。）`,
							    success: (res) => {
							        if (res.confirm) {
							            console.log('用户点击确定');
										if (this.activityObj.hasoption === 0) {
											this._getBalance()
										} else {
											// alert('我要报名')
											this.isShowMask = true
											this.isShow = true
											this.btnForbid = true
											// uni.showToast({
											//     title: '我要报名',
											//     duration: 1000
											// });
										}
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							})
						} else {
							// console.log("你大爷啊111")
							if (this.activityObj.hasoption === 0) {
								// console.log("你大爷啊222")
								this._getBalance()
							} else {
								// alert('我要报名')
								this.isShowMask = true
								this.isShow = true
								this.btnForbid = true
								// uni.showToast({
								//     title: '我要报名',
								//     duration: 1000
								// });
								// console.log("你大爷啊333")
							}
						}
					})
				} else {
					if (this.activityObj.hasoption === 0) {
						this._getBalance()
					} else {
						// alert('我要报名')
						this.isShowMask = true
						this.isShow = true
						this.btnForbid = true
						// uni.showToast({
						//     title: '我要报名',
						//     duration: 1000
						// });
					}
				}
				
			},
			_getBalance() {
				// 获取余额
				let data = {aid: this.activityObj.id}
				getBalance(data, (res) => {
					if (res.code != 0) {
						uni.showToast({
				　　　　　　 title: res.message,
				　　　　　　 icon: 'none'
				　　　　 })
						return
					}
					console.log(res)
					this.moneyObj = res.data
					console.log(res.data)
					this.isShow = false
					this.isPayShow = true
					this.isShowMask = true
					this.btnForbid = true
					console.log('选择支付方式')
				})
			},
			// 选中支付方式
			selectPay(index) {
				console.log(index)
				
				this.currentIndex = index
			},
			// 关闭按钮
			close() {
				this.isShow = false
				this.isShowMask = false
				this.btnForbid = false
				this.$emit('forbidBtn', this.btnForbid)
				this.currentSp = [] // 多规格选中清空
				this.calculatePrice = [] // 多规格选中价格清空
				this.calculatePriceLen = ''
				this.payBtnTxt = '付款'
			},
			// 点击遮罩隐藏购买表单
			hideForm() {
				this.isShow = false
				this.isShowMask = false
				this.btnForbid = false
				this.$emit('forbidBtn', this.btnForbid)
				if (this.isPayShow) {
					this.isShowMask = true
				}
				this.currentSp = [] // 多规格选中清空
				this.calculatePrice = [] // 多规格选中价格清空
				this.calculatePriceLen = ''
				this.payBtnTxt = '付款'
			},
			//多选框
			chooseLike(e) {
				console.log(e.detail.value)
			},
			// 付钱
			pay() {
				// this.isShow = false
				// this.isPayShow = true
				// this.isShowMask = true
				// this._getBalance()
				for (let i = 0; i < this.option.length; i++) {
					if (this.option[i].title.replace(/,/g,'').replace(/\s*/g,"").includes(this.calculatePrice.join(''))) {
						console.log(this.option[i].price)
						console.log('-----------------')
						console.log(this.option[i])
						console.log('-----------------')
						// 显示付款按钮
						if (this.option[i].total <= 0 || Number(this.option[i].total) <= Number(this.option[i].sales)) {
							uni.showToast({
								title: '名额不足',
								icon: 'none'
							})
							return
						}
					}
				}
				let data = {aid: this.activityObj.id,optionid: this.optionId}
				getBalance(data, (res) => {
					if (res.code != 0) {
						uni.showToast({
				　　　　　　 title: res.message,
				　　　　　　 icon: 'none'
				　　　　 })
						return
					}
					console.log(res)
					this.moneyObj = res.data
					console.log(res.data)
					this.isShow = false
					this.isPayShow = true
					this.isShowMask = true
					this.btnForbid = true
					console.log('选择支付方式222')
				})
				
			},
			// 关闭支付页面
			closePay() {
				this.btnForbid = false
				this.$emit('forbidBtn', this.btnForbid)
				this.isPayShow = false
				this.isShowMask = false
				this.btnForbid = false
				this.currentSp = [] // 多规格选中清空
				this.calculatePrice = [] // 多规格选中价格清空
				this.calculatePriceLen = ''
				this.payBtnTxt = '付款'
			},
			// 选择
			selcetSp(index, i, sp) {
				console.log(this.$refs.spec)
				this.currentSp[index] = i
				console.log(this.currentSp)
				console.log(this.option)
				console.log(sp)
				this.$forceUpdate()  // 强制重新渲染
				// this.calculatePrice.push(sp.title)
				// this.calculatePrice = [...new Set(this.calculatePrice)]
				// this.calculatePrice[index] = sp.title
				this.calculatePrice[index] = sp.id
				let arr = []
				this.calculatePrice.forEach( item => {
					arr.push(item)
				})
				this.calculatePriceLen = arr.length
				
				// console.log(arr.length)
				// this.spaceCurrentSp = trimSpace(this.currentSp).length
				// this.spaceCalculatePrice = trimSpace(this.calculatePrice).length
				console.log(this.calculatePrice)
				
				for (let i = 0; i < this.option.length; i++) {
					// console.log(this.option[i].title.replace(/,/g,'').replace(/\s*/g,"").includes(this.calculatePrice.join('')))
					// console.log(this.option[i].id.split(',').join('').includes(this.calculatePrice.join().split(',').join('')))
					// this.option[i].title.replace(/,/g,'').replace(/\s*/g,"").includes(this.calculatePrice.join(''))
					console.log(11111)
					console.log(this.option[i].itemids.split(',').join(''))
					console.log(22222)
					console.log(this.calculatePrice.join(''))
					console.log(33333)
					if (this.option[i].itemids.split(',').join('').includes(this.calculatePrice.join(''))) {
						console.log(this.option[i].price)
						console.log('-----------------')
						console.log(this.option[i])
						console.log('-----------------')
						// 显示付款按钮
						if (this.currentSp.length === this.calculatePriceLen) {
							if (this.option[i].total <= 0 || Number(this.option[i].total) <= Number(this.option[i].sales)) {
								this.calculatePriceLen--
								this.payBtnTxt = '名额不足'
							}
						}
						this.specPrice = this.option[i].price
						this.optionId = this.option[i].id
						break
					}
					
					// else {
					// 	if (this.currentSp.length === this.calculatePriceLen) {
					// 		if (this.option[i].total <= 0 || Number(this.option[i].total) <= Number(this.option[i].sales)) {
					// 			this.calculatePriceLen--
					// 			this.payBtnTxt = '名额不足'
					// 		}
					// 	}
					// 	this.specPrice = this.option[i].price
					// 	this.optionId = this.option[i].id
					// }
				}
				
			},
			// 确认支付
			payMent() {
				console.log(this.currentIndex)
				uni.showLoading({
				    title: '支付中...'
				})
				// 判断活动金额是否等于0，真的话直接跳转订单详情页面
				let b = this.moneyObj.price - 0
				if (b <= 0) {
					
					if (this.currentIndex === 0) {
						// 微信支付
						let data = {id: this.moneyObj.id,paytype: 3}
						payMoney(data, (res) => {
							console.log(res)
							
							setTimeout( ()=> {
							    uni.hideLoading();
								uni.navigateTo({
									url: '/pages/active/payOrderDetail?id=' + res.data.id + '&refundid=' + this.activityObj.is_refund
								})
							}, 1000)
						})
					} else {
						// 余额支付
						let data = {id: this.moneyObj.id,paytype: 1}
						payMoney(data, (res) => {
							console.log(res)
							if (res.code != 0) {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							} else {
								setTimeout( ()=> {
								    uni.hideLoading();
									uni.navigateTo({
										url: '/pages/active/payOrderDetail?id=' + res.data.id + '&refundid=' + this.activityObj.is_refund
									})
								}, 1000)
								
							}
							
						})
					}
					
					return
				}
				// this.currentIndex===0 微信支付，1是余额支付
				if (this.currentIndex === 0) {
					// 微信支付
					let data = {id: this.moneyObj.id,paytype: 3}
					payMoney(data, (res) => {
						console.log(res)
						window.location.href = res.data.url
					})
					// uni.showToast({
					//     title: '微信成功支付100万',
					//     duration: 1000
					// });
				} else {
					// 余额支付
					let data = {id: this.moneyObj.id,paytype: 1}
					payMoney(data, (res) => {
						console.log(789)
						console.log(res)
						console.log(789)
						if (res.code != 0) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						} else {
							
							setTimeout( ()=> {
							    uni.hideLoading();
								uni.navigateTo({
									// url: '/pages/active/payOrderDetail?id=' + this.moneyObj.id + '&refundid=' + this.activityObj.is_refund
									url: '/pages/active/payOrderDetail?id=' + res.data.id + '&refundid=' + this.activityObj.is_refund
								})
							}, 1000)
						}
					})
				}
				
			}
		},
	}
</script>

<style lang="scss">
	
	.button {
		padding: 0 35rpx;
		height: 130rpx;
		background-color: #fff;	
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 101;
		.remind {
			// flex: 1;
			font-size: 32rpx;
			.main {
				text-align: center;
				height: 90rpx;
				color: #fff;
				border-radius: 44rpx;
				margin: 0 0 0 8rpx;
				display: flex;
				flex-direction: column;
				width: 90rpx;
				font-size: 24rpx;
				justify-content: center;
				letter-spacing: 1px;
				&:active {
					opacity: 0.9;
				}
			}
			.green {
				background-color: #06ac56;
			}
			.red {
				background-color: #ff1f2c;
			}
		}
		.img {
			width: 90rpx;
			height: 90rpx;
			background-image: linear-gradient(-90deg,
				#fe8700 0%, 
				#ff9e2c 100%), 
			linear-gradient(
				#de7b38, 
				#de7b38);
			border-radius: 50%;
			// margin-right: 28rpx;
			position: relative;
			image {
				width: 44rpx;
				height: 42rpx;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}		
		}
		.img:active {
			opacity: 0.9;
		}
		.join {
			// width: 360rpx;
			margin-left: 8rpx;
			flex: 1;
			height: 90rpx;
			background-image: linear-gradient(-90deg, 
				#fe8700 0%, 
				#ff9e2c 100%), 
			linear-gradient(
				#de7b38, 
				#de7b38);
			border-radius: 45rpx;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			font-size: 34rpx;
		}
		// .join:active {
		// 	opacity: 0.9;
		// }
		.forbid {
			background: #b3b3b3;
		}
		uni-button:after {
		    border: none;  
		}
		.mask {
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			opacity:0.7;
			filter:alpha(opacity=70);
			left:0;
			bottom: 0;
			z-index:102;
		}
		.buy-form {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index:103;
			width: 100%;
			/*height: 85%;*/
			background-color: #fff;
			border-radius: 5px 5px 0 0;
			animation:popup 0.2s;
			animation-fill-mode: forwards;
			overflow-x: hidden;
			overflow-y: auto;
			.title {
				font-size: 36rpx;
				color: #1a1a1a;
				text-align: center;
				.close {
					position: absolute;
					right: 30rpx;
					top: 20rpx;
					color: #999;
					font-size: 50rpx;
				}
			}
			.city {
				margin-top: 50rpx;
				display: flex;
				flex-direction: column;
				button {
					background-color: #f1f2f6;
					border-radius: 29rpx;
					padding: 0 30rpx;
					// margin-right: 10rpx;
					// margin-bottom: 10rpx;
					margin: 0 10rpx 10rpx 0;
					font-size: 24rpx;
					color: #4b4b4b;
					font-family: SourceHanSansCN-Regular;
					height: 58rpx;
					line-height: 58rpx;
				}
				.on {
					color: #fff;
					background-image: linear-gradient(-90deg, 
							#fe8700 0%, 
							#ff9e2c 100%), 
						linear-gradient(-89deg, 
							#e95783 0%, 
							#fe93a3 100%), 
						linear-gradient(
							#e85782, 
							#e85782);
				}
			}
			.line {
				border-bottom: 1rpx solid #e6e6e6;
				padding-bottom: 20rpx;
			}
			.line:last-child {
				border-bottom: none !important;
			}
			.button-pay {
				width: 678rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				background-image: linear-gradient(-90deg, 
						#fe8700 0%, 
						#ff9e2c 100%), 
					linear-gradient(-89deg, 
						#e95783 0%, 
						#fe93a3 100%), 
					linear-gradient(
						#cb9e5f, 
						#cb9e5f);
				border-radius: 45rpx;
				position: fixed;
				left: 50%;
				bottom: 21rpx;
				margin-left: -339rpx;
			}
			.forb {
				background-color: #f5f7fa;
				color: #c0c4cc;
				background-image: none;
			}
			
		}
		.pay-select {
			width: 750rpx;
			// height: 668rpx;
			background-color: #ffffff;
			// background-color: red;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 104;
			animation:popupSelect 0.2s;
			animation-fill-mode: forwards;
			overflow-x: hidden;
			overflow-y: auto;
			// top: 0;
			.way {
				font-family: SourceHanSansCN-Medium;
				font-size: 36rpx;
				color: #1a1a1a;
				margin-top: 49rpx;
				text-align: center;
				position: relative;
				text {
					font-size: 45rpx;
					position: absolute;
					right: 35rpx;
					top: -5rpx;
				}
			}
			.time {
				font-family: SourceHanSansCN-Regular;
				font-size: 28rpx;
				color: #032545;
				margin-top: 50rpx;
				text-align: center;
				text {
					font-family: PingFangSC-Medium;
					font-size: 28rpx;
					color: #fe8700;
					padding-left: 4rpx;
				}
			}
			.select {
				margin: 25rpx 36rpx 0;
				.wei-xin {
					box-sizing: border-box;
					border-bottom: 1px solid #e6e6e6;
					height: 100rpx;
					display: flex;
					align-items: center;
					.wei {
						width: 46rpx;
						height: 40rpx;
						margin-right: 18rpx;
						margin-left: 13rpx;
					}
					text {
						font-size: 30rpx;
						color: #032545;
						display: flex;
						flex: 1;
					}
					.selected {
						opacity: 1 !important;
					}
					.is-right {
						width: 36rpx;
						height: 36rpx;
						margin-right: 16rpx;
						opacity: 0;
					}
				}
				
				.button-pay {
					width: 678rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					background-image: linear-gradient(-90deg, 
							#fe8700 0%, 
							#ff9e2c 100%), 
						linear-gradient(-89deg, 
							#e95783 0%, 
							#fe93a3 100%), 
						linear-gradient(
							#cb9e5f, 
							#cb9e5f);
					border-radius: 45rpx;
					position: fixed;
					left: 50%;
					bottom: 21rpx;
					margin-left: -339rpx;
					color: #fff;
					letter-spacing: 2rpx;
				}
			}
		}
		@keyframes popup
		{
			0%   {height:0;}
			/*50%  {height:40%;}*/
			100% {height:85%;}
		}
		@keyframes popupSelect
		{
			0%   {height: 0;}
			/*50%  {height:40%;}*/
			100% {height: 668rpx;}
		}
	}
</style>
